import React from 'react'
import Header from "../Header";
import EmploymentIndustry from "../EmploymentIndustry";
import IineChart from '@/pages/IineChart'
import AgeAistribution from '@/pages/AgeAistribution'
import SkillsMastery from '@/pages/SkillsMastery'
import WorkingYears from '@/pages/WorkingYears'
import AnnualSalary from '@/pages/AnnualSalary'
import MapPoint from '@/pages/MapPoint'
import "./index.less";

const Index = () => {
    return <div>
        <Header></Header>
        <div className='mainbox'>
            <div class="column-left">
                <div class="panel bar">
                    <EmploymentIndustry></EmploymentIndustry>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel line">
                    <IineChart></IineChart>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel pie">
                    <AgeAistribution></AgeAistribution>
                    <div class="panel-footer"></div>
                </div>
            </div>
            <div className='column-center'>
                <div class="no">
                    <div class="no-hd">
                        <ul className='no-hd-ul'>
                            <li className='no-item-li'>125811</li>
                            <li className='no-item-li'>104563</li>
                        </ul>
                    </div>
                    <div class="no-bd">
                        <ul className='no-hd-ul'>
                            <li className='no-item-li-text'>前端需求人数</li>
                            <li className='no-item-li-text'>市场供应人数</li>
                        </ul>
                    </div>
                </div>
                <div class="map">
                    <MapPoint></MapPoint>
                    {/* <div class="map1"></div>
                    <div class="map2"></div>
                    <div class="map3"></div> */}
                </div>
            </div>
            <div className='column-right'>
                <div class="panel bar">
                    <SkillsMastery></SkillsMastery>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel line">
                    <WorkingYears></WorkingYears>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel pie">
                    <AnnualSalary></AnnualSalary>
                    <div class="panel-footer"></div>
                </div>
            </div>
        </div>

    </div>
}

export default Index